<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Register</title>
    <link rel="shortcut icon" th:href="@{/frontend/images/favicon.ico}"
          href="../../static/frontend/images/favicon.ico"/>
    <link href="../../static/frontend/css/bootstrap.css" th:href="@{/frontend/css/bootstrap.css}" rel="stylesheet"
          type="text/css" media="all"/>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="../../static/frontend/js/jquery.min.js" th:src="@{/frontend/js/jquery.min.js}"></script>
    <!-- Custom Theme files -->
    <script src="../../static/frontend/layer/layer.js" th:src="@{/frontend/layer/layer.js}"></script>
    <!--theme-style-->
    <link href="../../static/frontend/css/style.css" th:href="@{/frontend/css/style.css}" rel="stylesheet"
          type="text/css" media="all"/>
    <!--//theme-style-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="keywords" content="Fashion Mania Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design"/>
    <script type="application/x-javascript"> addEventListener("load", function () {
        setTimeout(hideURLbar, 0);
    }, false);
    function hideURLbar() {
        window.scrollTo(0, 1);
    } </script>
    <!-- start menu -->
    <link href="../../static/frontend/css/memenu.css" th:href="@{/frontend/css/memenu.css}" rel="stylesheet"
          type="text/css" media="all"/>
    <script type="text/javascript" src="../../static/frontend/js/memenu.js" th:src="@{/frontend/js/memenu.js}"></script>
    <script>$(document).ready(function () {
        $(".memenu").memenu();
    }

    );</script>
    <script src="../../static/frontend/js/simpleCart.min.js" th:src="@{/frontend/js/simpleCart.min.js}"></script>
    <!-- slide -->
</head>
<body>

<div th:replace="frontend/common::header"></div>

<div class="container">
    <div class="register">
        <h1>注册</h1>
        <form id="registerform">
            <div class="col-md-6  register-top-grid">

                <div class="mation">
                    <span style="color:#000">用户名</span>
                    <input style="border-color: #000" type="text" name="userName"  onkeyup="checkUserName()" id="userName" autocomplete="off">

                    <span style="color:#000">邮箱地址</span>
                    <input style="border-color: #000" type="text"  name="email" autocomplete="off">
                    <span id="checkUserName"></span>

                </div>
                <div class="clearfix"></div>
                <a class="news-letter" href="#">
                    <label class="checkbox"><input id="checkbox" type="checkbox" name="checkbox"
                                                   checked="false"><i> </i>立即登录</label>
                </a>
            </div>
            <div class=" col-md-6 register-bottom-grid">

                <div class="mation">
                    <span style="color:#000">密码</span>
                    <input style="border-color: #000" type="text" name="password" id="pwd" onfocus="this.type ='password' " oninput="validate()" autocomplete="off">
                    <span style="color:#000">再次输入密码</span>
                    <input style="border-color: #000" type="text" oninput="validate()" onfocus="this.type ='password' " name="passwordRepeat" id="pwd1" autocomplete="off">
                    <span id="reminder"></span>
                </div>
            </div>
            <div class="clearfix"></div>
        </form>

        <div class="register-but">
            <div>
                <input type="button" value="提交" onclick="create()" id="button">
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
</div>
<script>
    function checkUserName() {
        var userName = $("#userName").val();
        $.ajax({
            cache: true,
            type: "get",
            url: "/fleastreet/user/checkUserName/" + userName,
            async: false,
            success: function (result) {
                var check=$("#checkUserName");
                if (result.code == 0) {
                    if (result.data == true) {
                        check.html("用户名唯一，可以使用").css("color", "green");
                        $("#button").show()
                    }else if(result.data==false){
                        check.html("用户名已存在，请换一个").css("color", "red");
                        $("#button").hide()
                    }
                } else {
                    layer.msg(result.msg);
                }
            }
        })

    }


    function validate() {

        var pwd = $("#pwd").val();
        var pwd1 = $("#pwd1").val();
        <!-- 对比两次输入的密码 -->
        var reminder=$("#reminder");
        var button=$("#button");
        if (pwd == pwd1) {
            reminder.html("两次密码相同").css("color", "green");
            button.show()
        }
        else {
            reminder.html("两次密码不相同").css("color", "red");
            button.hide()
        }
    }


    function create() {
        if (!$("[name='userName']").val() || !$("[name='password']").val() || !$("[name='email']").val()) {
            layer.msg("请输入用户名、密码、邮箱");
            return;
        }
        var type = 0
        //状态用于后端判断是否选中，然后进一步处理不同逻辑：直接登陆跳转到首页或者不登录跳转到登陆页
        if ($('#checkbox').prop('checked')) {
            type = 1
        }
        $.ajax({
            cache: true,
            type: "POST",
            url: "/fleastreet/user/register/" + type,
            data: $('#registerform').serialize(),
            async: false,
            error: function (request) {
                layer.msg("Connection error");
            },
            success: function (result) {
                if (result.code == 0) {
                    layer.msg("创建成功！");
                    if (type == 1) {
                        window.location.href = "/fleastreet/index";
                    } else {
                        window.location.href = "/fleastreet/user/login";
                    }
                } else {
                    layer.msg(result.msg);
                }
            }
        });
    }
</script>

<div th:replace="frontend/common::footer"></div>


</body>
</html>